<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Vue 阶段 Todolist </title>
    <link rel="stylesheet" href="./plan.css">
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>

<body>
    <!-- 模板 -->
    <div id="container">
        <div class="tt-header">
            <div class="tt-header-box">
                <!-- 输入框 -->
                <input 
                    v-model="v1"
                    v-on:keydown.enter = "addTask"
                    type="text" placeholder="请输入您的计划">
                <!-- 按钮 -->
                <button
                    v-on:click="addTask"
                    >确认</button>
            </div>
        </div>

        <div class="tt-plan">
            <h3 class="tt-plan-title">
                计划列表 [<span>{{total}}</span>]
            </h3>
            <div class="tt-plan-list">
                <h3>未完成 [<span>{{unfinishCount}}</span>]</h3>
                <ul>
                    <!-- 模板：未完成状态 -->
                    <li v-for="(item,index) in taskArray" v-bind:key="item.id" v-if="!item.isDone">
                        <div class="plan-box">
                            <!-- 复选框 -->
                            <input type="checkbox" v-model="taskArray[index].isDone">
                            <span>{{item.task}}</span>
                        </div>
                        <div class="plan-btn">
                            <!-- 删除 -->
                            <button 
                                v-on:click="deleteTask(index)">删除</button>
                        </div>
                    </li>
                </ul>
                <h3>已完成 [<span>{{finishCount}}</span>]</h3>
                <ol>
                    <!-- 模板：已完成状态 -->
                    <li v-for="(item ,index) in taskArray" v-bind:key="item.id" v-if="item.isDone">
                        <div class="plan-box">
                            <input type="checkbox" v-model="taskArray[index].isDone">
                            <span>{{item.task}}</span>
                        </div>
                        <div class="plan-btn">
                            <button 
                                v-on:click="deleteTask(index)">删除</button>
                        </div>
                    </li>
                </ol>
            </div>
        </div>
    </div>

    <script>
        // 需求：
        // 编写todolist业务逻辑
        // 添加任务
        // 处理任务状态
        // 统计未任务数量和和统计已完成任务数量
        // 删除任务

        // 思考：
        // 1.0 如何记录输入的值
        // 2.0 如何记录每一次输入的“计划” ，就得往数组这方面思考
        // 3.0 关于数组的API (push / splice / unshift 。。。。)
        // 4.0 如何统计“计划”的数量  循环、计数器变量
        // 5.0 如果把每次输入的值，放在对象中，这个对象添加布尔值 区别“计划”的状态
        // 6.0 如何删除“计划” ，那就是删除数组的数据

        // 编码：
        // 1.0 创建Vue实例
        new Vue({
            el: "#container",
            data: {
                v1: "", // 记录输入的值
                taskArray: [ // 记录每一次输入的“计划” 
                    { task: "敲代码", isDone: false, id: "xxx1" },
                    { task: "UI设计", isDone: true, id: "xxx2" },
                    { task: "阅读文档", isDone: false, id: "xxx3" }
                ],
                total: 0
            },
            computed: {
                // 未完成的数量
                unfinishCount() {
                    // 计数器变量
                    let count = 0;
                    // 循环数组
                    this.taskArray.forEach(item => {
                        // 判断计划的状态 ！
                        if (!item.isDone) {
                            count += 1;
                        }
                    })
                    // 返回计算的结果
                    return count;
                },
                // 已完成的数量
                finishCount() {
                    // 计数器变量
                    let count = 0;
                    // 循环数组
                    this.taskArray.forEach(item => {
                        // 判断计划的状态 
                        if (item.isDone) {
                            count += 1;
                        }
                    })
                    // 返回计算的结果
                    return count;
                }
            },
            watch: {
                // 属性侦听 不需要return 
                taskArray: {
                    deep: true,
                    immediate: true, // immediate
                    handler: function(){
                        this.total = this.taskArray.length;
                    }
                }
            },
            methods: {
                deleteTask(index){
                    if(this.taskArray == 0){
                        return ;
                    }
                    this.taskArray.splice(index,1);
                },
                addTask(){
                    // 判断输入框是否有值
                    if(this.v1.length == 0) {
                        alert("请输入计划")
                        return ;
                    }
                    // let len = this.taskArray.length;
                    // len ++;
                    let obj = {};
                    obj.task = this.v1;// 当前输入的任务
                    obj.isDone = false ;// 任务状态
                    // obj.id = "xxx"+len;
                    obj.id = Symbol();//唯一的

                    // 把这个任务添加到数组中
                    // this.taskArray.push(obj);
                    this.taskArray.unshift(obj);

                    // 重置输入的值
                    this.v1 = "";
                }
            }
        })


    </script>
</body>

</html>